<script setup lang="ts">
import { ref } from 'vue';

const text = ref('Button Edit 按钮输入框');
const enableClear = ref(true);
</script>
<template>
    <div class="my-2 d-flex">
        <div class="f-demo-label">显示清空按钮:</div>
        <f-switch v-model="enableClear"></f-switch>
    </div>
    <f-button-edit :enable-clear="enableClear" v-model="text"></f-button-edit>
    <div class="my-2">
        <span>只读状态: </span>
    </div>
    <f-button-edit :enable-clear="enableClear" readonly v-model="text"></f-button-edit>
    <div class="my-2">
        <span>禁用状态: </span>
    </div>
    <f-button-edit :enable-clear="enableClear" disable v-model="text"></f-button-edit>
</template>
<style scoped>
.f-demo-label {
    line-height: 1.4rem;
    margin-right: 8px;
}
</style>
